<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script src="../../js/jquery-1.11.2.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <style>
        body {
            padding: 50px;
        }
    </style>
</head>
<body>

<button class="btn btn-primary" data-toggle="collapse" data-target="#wrap">按钮</button>
<div class="collapse" id="wrap">
    <div class="well">111111HTML 是用来描述网页的一种语言。
        HTML 指的是超文本标记语言 (Hyper Text Markup Language)
        HTML 不是一种编程语言，而是一种标记语言 (markup language)
        标记语言是一套标记标签 (markup tag)
        HTML 使用标记标签来描述网页
        HTML 是用来描述网页的一种语言。
        HTML 指的是超文本标记语言 (Hyper Text Markup Language)
        HTML 不是一种编程语言，而是一种标记语言 (markup language)
        标记语言是一套标记标签 (markup tag)
        HTML 使用标记标签来描述网页
        HTML 是用来描述网页的一种语言。
        HTML 指的是超文本标记语言 (Hyper Text Markup Language)
        HTML 不是一种编程语言，而是一种标记语言 (markup language)
        标记语言是一套标记标签 (markup tag)
        HTML 使用标记标签来描述网页
    </div>
</div>
<hr>
<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#part1" data-toggle="collapse">点击展示，再次点击折叠</a>
            </h4>
        </div>
        <div id="part1" class="panel-collapse collapse in">
            <div class="panel-body" >
                第一部分内容
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#part2" data-toggle="collapse">点击展示，再次点击折叠</a>
            </h4>
        </div>
        <div id="part2" class="panel-collapse collapse in">
            <div class="panel-body" >
                第二部分内容
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#part3" data-toggle="collapse">点击展示，再次点击折叠</a>
            </h4>
        </div>
        <div id="part3" class="panel-collapse collapse in">
            <div class="panel-body" >
                第三部分内容
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title" >
                <a href="#part4" data-toggle="collapse">点击展示，再次点击折叠</a>
            </h4>
        </div>
        <div id="part4" class="panel-collapse collapse in">
            <div class="panel-body">
                第四部分内容
            </div>
        </div>
    </div>
</div>
</body>
</html>
